<template>
    <div class="contion">
        <div class="home">
            <div class="home_1">
                <van-icon name="apps-o" size="30" style="color:#E44F32;margin-left:30px"/>
                <img :src="user.img" style="width: 60px;height: 60px;" class="image">
            </div>
            <div class="home_2">
                <span style="font-size:25px"><b>你好，{{ user.username }}</b></span>
                <span>在这里找到最适合您的鞋子</span>
            </div>
            <div class="h">
                <div class="home_3"  @click="search">
                    <van-icon name="search" size="30" style="margin-left:10px;margin-top:4px"/>
                    <span style="margin-top:7px;margin-left:10px">搜索</span>
                </div>
                <div class="h_1">
                    <van-icon name="bars" size="30" style="color:#FFFFFF;margin-left:5px;;margin-top:5px"/>
                </div>
            </div>
            <div class="home_4">
                <span style="font-size:18px"><b>热门产品</b></span>
                <span style="color:#E44F32;font-size:18px;margin-left:400px" @click="shoe">查看全部</span>
            </div>
            <div class="home_5">
                <div v-for="(i,k) in shoes" :key="k" class="h4_1">
                    <router-link :to="'/detail/?id='+i.id">
                        <img :src="i.image" style="width:150px;height:150px;"> 
                    </router-link>
                <span>{{ i.name }}</span>
                <span>{{ i.ca }}</span>
                <div>
                    <span>￥{{ i.price }}</span>
                    <van-icon name="like" size="25" style="color:#E44F32;margin-left:60px" @click="addlike(i)"/>
                    <van-icon name="cart" size="25" style="color:#E44F32;" @click="addcart(i)"/>
                </div>
            </div>
            </div>
            <div class="home_6">
                <van-tabbar v-model="active" active-color="#ee0a24" fixed="true" class="h2">
                    <van-tabbar-item icon="wap-home-o"/>
                    <van-tabbar-item icon="like-o" @click="like"/>
                    <div class="home_6_1">
                        <van-tabbar-item icon="shopping-cart-o" @click="cart" style="color:#FFFFFF;margin-top:10px"/>
                    </div>
                    <van-tabbar-item icon="comment-o" @click="message"/>
                    <van-tabbar-item icon="manager-o" @click="my"/>
                </van-tabbar>                  
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {ElMessage} from 'element-plus'
import axios from 'axios'
import {useRouter} from 'vue-router'

const router = useRouter()

const active = ref(0);

const like = () => {
    router.push('/like')
}

const cart = () => {
    router.push('/cart')
}

const message = () => {
    router.push('/message')
}

const my = () => {
    router.push('/my')
}

const search = () => {
    router.push('/search')
}

let user = ref({})

const datauser = () => {
    axios.get(`http://127.0.0.1:8000/home/user/?user=${localStorage.getItem('userid')}`).then(res=>{
        // console.log(res)
        user.value = res.data.data
    })
}

let shoes = ref([])

const datashoe = () => {
    axios.get("http://127.0.0.1:8000/home/a/").then(res=>{
        // console.log(res)
        shoes.value = res.data.data
    })
}

const shoe = () =>{
    router.push('shoes')
}


const addcart = (i) =>{
    axios.post("http://127.0.0.1:8000/home/cart/",{user:localStorage.getItem('userid'),shoes:i.id}).then(res=>{
        if(res.data.code==200){
            ElMessage.success(res.data.msg)
            router.push('/cart')
        }
        else{
            ElMessage.error(res.data.msg)
        }
})
}

const addlike = (i) =>{
    axios.post("http://127.0.0.1:8000/home/like/",{user:localStorage.getItem('userid'),shoes:i.id}).then(res=>{
        if(res.data.code==200){
            ElMessage.success(res.data.msg)
            router.push('/like')
        }
        else{
            ElMessage.error(res.data.msg)
            router.push('/like')
        }
    })
}
onMounted(()=>{
    datauser()
    datashoe()
})

</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.home{
    width: 600px;
    height: 1150px;
    display: flex;
    flex-direction: column;
    /*background-color: aqua;*/
}

.image{
    float: right;
    border-radius: 50px;
    margin-right: 30px;
}

.home_1{
    padding-top: 20px;
    padding-bottom: 10px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
    background-color: #FFFFFF;
    border: #FFFFFF solid 0px;
}

.home_2{
    display: flex;
    flex-direction: column;
    margin-left: 60px;
    margin-top: 20px;
}

.h{
    display: flex;
    flex-direction: row;
}

.h_1{
    width:40px;
    height:40px;
    background-color:#E44F32;
    margin-top:25px;
    margin-left:5px;
    border-radius: 5px;
}

.home_3{
    width: 250px;
    height: 40px;
    display: flex;
    flex-direction: row;
    border-radius: 10px;
    background-color: #9F9E9A0D;
    margin-top: 20px;
    margin-left: 80px;
    margin-bottom: 0px;
}

.home_4{
    margin-top: 50px;
    margin-left: 20px;
}

.home_5{
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: repeat(3, 1fr); /* 根据需要调整列数 */
    display: grid;
    gap: 10px;
    margin-top: 40px;
}

.h4_1{
    width: 160px;
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    margin-bottom: 10px;
}

.h2{
    width: 600px;
}

#app {
    position: relative;
    min-height: 100vh;
}


.van-tabbar {
    width: 80%; /* 设置标签栏宽度 */
    max-width: 600px; /* 最大宽度限制 */
    margin: 0 auto; /* 水平居中 */
    position: fixed; /* 固定定位，保持在底部 */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100; /* 确保在其他元素之上 */
    background-color: #FFFFFF;
}

.home_6_1{
    width: 50px;
    border-radius: 50px;
    background-color: #E44F32;
}

</style>